﻿$(window).load(function () { $(".loading").fadeOut() })
$(function () {
    // 定义处理各类数据的函数
    
    // 更新多级市场价格对比表格
    function updateMarketPriceTable(data) {
        const tableBody = $(".table1 tbody");
        // 保留表头
        const tableHeader = tableBody.find("tr:first");
        tableBody.empty();
        tableBody.append(tableHeader);
        
        // 添加数据行
        data.forEach(function(item) {
            const growthClass = parseFloat(item.value3) >= 0 ? "text-d" : "text-s";
            const growthSymbol = parseFloat(item.value3) >= 0 ? "" : "";
            const growth = growthSymbol + Math.abs(parseFloat(item.value3)) + "";
            
            const row = '<tr>' +
                '<td>' + item.name + '</td>' +
                '<td><span class="text-w">' + item.value1 + '</span></td>' +
                '<td><span class="text-b">' + item.value2 + '</span></td>' +
                '<td><div class="' + growthClass + '">' + growth + '</div></td>' +
                '</tr>';
            tableBody.append(row);
        });
    }
    
    // 更新月度销量图表
    function updateMonthlySales(data) {
        // 先检查容器是否存在
        const container = document.getElementById('echart3');
        if (!container) {
            console.error("月度销量图表容器不存在");
            return;
        }
        
        // 获取或创建echarts实例
        let myChart = echarts.getInstanceByDom(container);
        if (!myChart) {
            // 如果实例不存在，创建新实例
            myChart = echarts.init(container);
        }
        
        if (myChart) {
            const xData = [];      // 月份
            const seriesData = []; // 数量
            
            for(let i = 0; i < data.length; i++) {
                xData.push(data[i].name);       // 月份
                seriesData.push(data[i].value1); // 数量
            }
            
            // 如果没有数据，提供一些模拟数据以便测试显示
            if (xData.length === 0) {
                xData.push('1', '2', '3', '4', '5', '6', '7', '8', '9');
                seriesData.push(2, 3, 3, 9, 15, 12, 6, 4, 6);
                console.warn("月度销量没有数据，使用模拟数据显示");
            }
            
            // 设置图表配置
            myChart.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: function(params) {
                        return params.name + ': ' + params.value + '个';
                    }
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    top: '10%',
                    bottom: '15%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: xData,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(255,255,255,.1)",
                            width: 1,
                            type: "solid"
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        interval: 0,
                        show: true,
                        textStyle: {
                            color: "rgba(255,255,255,.8)",
                            fontSize: '12',
                        },
                    },
                }],
                yAxis: [{
                    type: 'value',
                    max: function(value) {
                        return Math.ceil(value.max * 1.2); // 稍微扩大y轴范围，使图表美观
                    },
                    axisLabel: {
                        formatter: '{value}',
                        show: true,
                        textStyle: {
                            color: "rgba(255,255,255,.8)",
                            fontSize: '12',
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(255,255,255,.1)",
                            width: 1,
                            type: "solid"
                        },
                    },
                    splitLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)",
                        }
                    }
                }],
                series: [{
                    name: '销量',
                    type: 'bar',
                    barWidth: '35%',
                    itemStyle: {
                        normal: {
                            color: function(params) {
                                // 根据图片中显示的样式，设置柱状图颜色
                                var colorList = ['#2f89cf', '#62c98d', '#2f89cf', '#62c98d', '#2f89cf', '#62c98d', '#2f89cf', '#62c98d', '#2f89cf'];
                                return colorList[params.dataIndex % colorList.length];
                            },
                            barBorderRadius: 3,
                        }
                    },
                    data: seriesData,
                    label: {
                        show: true,
                        position: 'top',
                        formatter: '{c}',
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: '10',
                        }
                    }
                }]
            }, true); // 使用true参数，不合并之前的选项
            
            // 监听图表大小变化
            window.addEventListener("resize", function () {
                myChart.resize();
            });
            
            console.log("月度销量图表更新完成");
        }
    }
    
    // 更新本月销量TOP10
    function updateMonthSalesTop(data) {
        // 更新热门话题榜
        const hotTopicsList = $(".huati ul");
        hotTopicsList.empty();
        
        // 取前5条数据显示为热门话题
        for(let i = 0; i < Math.min(data.length, 5); i++) {
            const item = data[i];
            const trend = parseFloat(item.value1) >= 0 ? "text-s" : "text-d";
            const trendSymbol = parseFloat(item.value1) >= 0 ? "↑" : "↓";
            const value1Abs = item.value1 ? Math.abs(parseInt(item.value1)) : 0;
            const row = '<li>' + (i+1) + '.' + item.name + ' <span class="' + trend + '">' + trendSymbol + value1Abs + '</span></li>';
            hotTopicsList.append(row);
        }
        
        // 获取标签云中的所有元素
        const tagcloudItems = $(".tagcloud a");
        
        // 更新标签云中的文本内容，不修改DOM结构和类名
        for(let i = 0; i < tagcloudItems.length; i++) {
            // 使用金额(value2)作为气泡显示的文本
            const amount = data[i]&&data[i].value2 || '0';
            $(tagcloudItems[i]).text(amount);
            if(amount == 0){
                $(tagcloudItems[i]).css("display", "none");
            }
        }
        
        // 不需要重新初始化tagcloud，保留原有特效
        console.log("标签云文本内容已更新");
    }
    
    // 更新门店下单图表
    function updateStoreOrders(data) {
        // 检查容器是否存在
        const container = document.getElementById('echart4');
        if (!container) {
            console.error("门店下单图表容器不存在");
            return;
        }
        
        // 获取或创建echarts实例
        let myChart = echarts.getInstanceByDom(container);
        if (!myChart) {
            myChart = echarts.init(container);
            console.log("门店下单图表新建实例");
        }
        
        if (myChart) {
            const xData = [];      // 月份
            const quantityData = []; // 数量
            const amountData = [];   // 金额
            
            // 处理数据，确保数据存在
            if (data && data.length > 0) {
                for(let i = 0; i < data.length; i++) {
                    xData.push(data[i].name);        // 月份
                    quantityData.push(data[i].value1); // 数量
                    amountData.push(data[i].value2);   // 金额
                }
            } else {
                // 默认数据
                xData.push('1月', '2月', '3月', '4月', '5月', '6月');
                quantityData.push(10, 20, 30, 25, 15, 35);
                amountData.push(100, 200, 300, 250, 150, 350);
                console.warn("门店下单没有数据，使用默认数据");
            }
            
            // 设置图表配置
            myChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['数量', '金额'],
                    top: '5%',
                    textStyle: {
                        color: "#fff",
                        fontSize: '12',
                    },
                    itemGap: 35
                },
                grid: {
                    left: '0%',
                    top: '40px',
                    right: '0%',
                    bottom: '0',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: xData,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(255,255,255,.1)",
                            width: 1,
                            type: "solid"
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        interval: 0,
                        show: true,
                        splitNumber: 5,
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: '12',
                        },
                    },
                }],
                yAxis: [{
                    type: 'value',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: '12',
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(255,255,255,.1)",
                            width: 1,
                            type: "solid"
                        },
                    },
                    splitLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)",
                        }
                    }
                }],
                series: [{
                    name: '数量',
                    type: 'line',
                    smooth: true,
                    data: quantityData,
                    itemStyle: {
                        normal: {
                            color: '#2f89cf',
                            opacity: 1,
                            barBorderRadius: 5,
                        }
                    }
                }, {
                    name: '金额',
                    type: 'line',
                    smooth: true,
                    data: amountData,
                    barWidth: '15',
                    itemStyle: {
                        normal: {
                            color: '#62c98d',
                            opacity: 1,
                            barBorderRadius: 5,
                        }
                    }
                }]
            }, true); // 使用true不合并选项
            
            // 监听图表大小变化
            window.addEventListener("resize", function () {
                myChart.resize();
            });
            
            console.log("门店下单图表更新完成");
        }
    }
    
    // 更新鲜花柜销量数据
    function updateFlowerCabinetSales(data) {
        if(data && data.length > 0) {
            // 更新完成人数
            const item = data[0];
            $(".wancheng h3").html(item.value1 + '<i>单</i>');
            // $(".yuan span").text(item.value2 + "%");
        }
    }
    
    // 更新畅销大类占比图表
    function updateSalesCategoryPie(data) {
        // 检查容器是否存在
        const container = document.getElementById('fb04');
        if (!container) {
            console.error("畅销大类占比图表容器不存在");
            return;
        }
        
        // 获取或创建echarts实例
        let myChart = echarts.getInstanceByDom(container);
        if (!myChart) {
            myChart = echarts.init(container);
            console.log("畅销大类占比图表新建实例");
        }
        
        if (myChart) {
            // 转换数据格式为饼图所需
            const pieData = [];
            const legendData = [];
            
            // 处理数据，确保数据存在
            if (data && data.length > 0) {
                for(let i = 0; i < data.length; i++) {
                    legendData.push(data[i].name);
                    pieData.push({
                        name: data[i].name,
                        value: parseInt(data[i].value1) || 0
                    });
                }
            } else {
                // 默认数据
                const defaultCategories = ['零销类', '服务类', '销售类', '软件类', '硬件类', '其它类'];
                const defaultValues = [10, 20, 30, 40, 50, 60];
                
                for(let i = 0; i < defaultCategories.length; i++) {
                    legendData.push(defaultCategories[i]);
                    pieData.push({
                        name: defaultCategories[i],
                        value: defaultValues[i]
                    });
                }
                console.warn("畅销大类占比没有数据，使用默认数据");
            }
            
            // 更新图表数据
            myChart.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)",
                    position: function (p) {
                        return [p[0] + 10, p[1] - 10];
                    }
                },
                legend: {
                    orient: 'vertical',
                    top: 'center',
                    right: '8%',
                    itemWidth: 10,
                    itemHeight: 10,
                    data: legendData,
                    textStyle: {
                        color: 'rgba(255,255,255,.5)',
                        fontSize: '12',
                    }
                },
                series: [
                    {
                        name: '畅销大类',
                        type: 'pie',
                        center: ['40%', '50%'],
                        radius: ['40%', '50%'],
                        color: ['#62c98d', '#2f89cf', '#4cb9cf', '#e0c828', '#e58c00', '#eb295b'],
                        label: { show: false },
                        labelLine: { show: false },
                        data: pieData
                    }
                ]
            }, true); // 使用true不合并选项
            
            // 监听图表大小变化
            window.addEventListener("resize", function () {
                myChart.resize();
            });
            
            console.log("畅销大类占比图表更新完成");
        }
    }
   
    // 更新地图周围的四项指标数据
    function updateMapFourItems(data) {
        // 地图周围的四个指标对应的数据源
        const dataSourceMap = {
            'data1': { index: 0, text: '合伙人数量' },
            'data2': { index: 1, text: '总进行咨询量' },
            'data3': { index: 2, text: '合作花店数量' },
            'data4': { index: 3, text: '设备投放数量' }
        };
        
        // 获取地图导航区域的所有数据项
        const mapNavItems = $(".mapnav ul li");
        
        // 遍历返回的数据，更新对应的指标值
        for(let i = 0; i < data.length; i++) {
            const item = data[i];
            // 获取数据源对应的配置
            const sourceConfig = dataSourceMap[item.name];
            
            if(sourceConfig && mapNavItems.length > sourceConfig.index) {
                // 找到对应的HTML元素
                const targetElement = $(mapNavItems[sourceConfig.index]);
                
                // 更新指标值
                targetElement.find("span").text(sourceConfig.text);
                targetElement.find("p").text(item.value1);
            }
        }
    }
    
    // 更新售出价格数据
    function updateSellingPrices(data) {
        // 检查容器是否存在
        const container = document.getElementById('myd1');
        if (!container) {
            console.error("售出价格图表容器不存在");
            return;
        }
        
        // 获取或创建echarts实例
        let myChart = echarts.getInstanceByDom(container);
        if (!myChart) {
            myChart = echarts.init(container);
            console.log("售出价格图表新建实例");
        }
        
        if (myChart && data) {
            // 确保数据存在且至少有3个元素
            let seriesData = [];
            let legendData = [];
            
            if (data && data.length >= 3) {
                // 使用实际数据
                seriesData = [
                    {
                        name: data[0].name,
                        type: 'bar',
                        barWidth: '20',
                        itemStyle: {
                            normal: {
                                show: true,
                                color: '#20aa92',
                                barBorderRadius: 50,
                                borderWidth: 0,
                            }
                        },
                        zlevel: 2,
                        barGap: '100%',
                        data: [parseInt(data[0].value1) || 18],
                        label: {
                            formatter: "{c}单",
                            show: true,
                            position: 'top',
                            textStyle: {
                                fontSize: 12,
                                color: 'rgba(255,255,255,.6)',
                            }
                        },
                    },
                    {
                        name: data[1].name,
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                show: true,
                                color: '#f4664e',
                                barBorderRadius: 50,
                                borderWidth: 0,
                            }
                        },
                        zlevel: 2,
                        barWidth: '20',
                        data: [parseInt(data[1].value1) || 12],
                        label: {
                            formatter: "{c}单",
                            show: true,
                            position: 'top',
                            textStyle: {
                                fontSize: 12,
                                color: 'rgba(255,255,255,.6)',
                            }
                        },
                    },
                    {
                        name: data[2].name,
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                show: true,
                                color: '#0c93dc',
                                barBorderRadius: 50,
                                borderWidth: 0,
                            }
                        },
                        zlevel: 2,
                        barWidth: '20',
                        data: [parseInt(data[2].value1) || 8],
                        label: {
                            formatter: "{c}单",
                            show: true,
                            position: 'top',
                            textStyle: {
                                fontSize: 12,
                                color: 'rgba(255,255,255,.6)',
                            }
                        },
                    }
                ];
                
                legendData = [data[0].name, data[1].name, data[2].name];
            } else {
                // 默认数据
                seriesData = [
                    {
                        name: '20以下',
                        type: 'bar',
                        barWidth: '20',
                        itemStyle: {
                            normal: {
                                show: true,
                                color: '#20aa92',
                                barBorderRadius: 50,
                                borderWidth: 0,
                            }
                        },
                        zlevel: 2,
                        barGap: '100%',
                        data: [18],
                        label: {
                            formatter: "{c}人",
                            show: true,
                            position: 'top',
                            textStyle: {
                                fontSize: 12,
                                color: 'rgba(255,255,255,.6)',
                            }
                        },
                    },
                    {
                        name: '20-40',
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                show: true,
                                color: '#f4664e',
                                barBorderRadius: 50,
                                borderWidth: 0,
                            }
                        },
                        zlevel: 2,
                        barWidth: '20',
                        data: [12],
                        label: {
                            formatter: "{c}人",
                            show: true,
                            position: 'top',
                            textStyle: {
                                fontSize: 12,
                                color: 'rgba(255,255,255,.6)',
                            }
                        },
                    },
                    {
                        name: '40-80',
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                show: true,
                                color: '#0c93dc',
                                barBorderRadius: 50,
                                borderWidth: 0,
                            }
                        },
                        zlevel: 2,
                        barWidth: '20',
                        data: [8],
                        label: {
                            formatter: "{c}份",
                            show: true,
                            position: 'top',
                            textStyle: {
                                fontSize: 12,
                                color: 'rgba(255,255,255,.6)',
                            }
                        },
                    }
                ];
                
                legendData = ['20以下', '20-40', '40-80'];
                console.warn("售出价格数据不完整，使用默认数据");
            }
            
            // 根据返回的数据结构创建图表
            myChart.setOption({
                grid: {
                    left: '5%',
                    right: '5%',
                    top: '15%',
                    bottom: '30%',
                    containLabel: true
                },
                legend: {
                    data: legendData,
                    bottom: 0,
                    itemWidth: 10,
                    itemHeight: 10,
                    textStyle: {
                        color: "#fff",
                        fontSize: '10',
                    },
                    itemGap: 5
                },
                tooltip: {
                    show: true,
                    trigger: 'item',
                    formatter: '{b}: {c}'
                },
                yAxis: {
                    type: 'value',
                    show: false,
                },
                xAxis: [{
                    type: 'category',
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#363e83',
                        }
                    },
                    axisLabel: {
                        show: false,
                    },
                    data: ['售出价格区间']
                }],
                series: seriesData
            }, true);
            
            // 处理图表大小调整
            window.addEventListener("resize", function () {
                myChart.resize();
            });
            
            console.log("售出价格图表更新完成");
        } else {
            console.error("售出价格数据不完整或图表容器不存在");
        }
    }
    
    // 初始化所有图表
    function initAllCharts() {
        // 初始化月度销量图表
        const echart3Container = document.getElementById('echart3');
        if (echart3Container && !echarts.getInstanceByDom(echart3Container)) {
            const monthlyChart = echarts.init(echart3Container);
            // 设置空的初始图表
            monthlyChart.setOption({
                grid: {
                    left: '5%',
                    right: '5%',
                    top: '10%',
                    bottom: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
                    axisLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)"
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: "rgba(255,255,255,.8)"
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)"
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: "rgba(255,255,255,.8)"
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)"
                        }
                    }
                },
                series: []
            });
        }
        
        // 初始化其他图表...
    }
    
    // 调用接口获取所有数据
    function loadAllData() {
        // 获取所有需要的数据类型
        const dataTypes = [1, 2, 3, 4, 5, 6, 7, 8];
        let loadedCount = 0;
        
        // 逐个请求数据
        for(let i = 0; i < dataTypes.length; i++) {
            const type = dataTypes[i];
            
            getListData(type, function(err, res) {
                loadedCount++;
                
                if(err) {
                    console.error("请求类型" + type + "数据出错:", err);
                    return;
                }
                
                if(res && res.code === "SUCCESS") {
                    // 根据类型处理不同的数据
                    handleDataByType(type, res.data);
                } else {
                    console.error("获取类型" + type + "数据失败:", res ? res.message : "未知错误");
                }
                
                // 所有数据加载完成
                if(loadedCount === dataTypes.length) {
                    console.log("所有数据加载完成");
                }
            });
        }
    }
    
    // 根据类型处理不同的数据
    function handleDataByType(type, data) {
        switch(type) {
            case 1: // 1月度销售
                updateMonthlySales(data);
                break;
            case 2: // 2本月销量top10
                updateMonthSalesTop(data);
                break;
            case 3: // 3畅销大类占比
                updateSalesCategoryPie(data);
                break;
            case 4: // 4中间地图四项
                updateMapFourItems(data);
                break;
            case 5: // 5多级市场价格对比
                updateMarketPriceTable(data);
                break;
            case 6: // 6鲜花柜销售数据
                updateFlowerCabinetSales(data);
                break;
            case 7: // 7售出价格
                updateSellingPrices(data);
                break;
            case 8: // 8门店下单数量金额按月
                updateStoreOrders(data);
                break;
            default:
                console.log("未知的数据类型: " + type);
        }
    }
    
    
    // 初始化所有图表
    initAllCharts();
    
    // 调用接口获取所有数据
    loadAllData();
    
    
})


















